<template>
<div class="box">
  <div class="box1">
        <div class="left">
        <img src="../../images/login.png" alt="">
    </div>
      <div class='right'>
          <div style="margin-left:100px"><h2>❤用户登录</h2></div>

        <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="用户名"
      name="user"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.user" />
    </a-form-item>

    <a-form-item
      label=" 密 &nbsp; 码"
      name="pwd"
      :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="formState.pwd" />
    </a-form-item>

  

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">登录</a-button>
     <p style="margin-top:10px"> <span @click="$router.push('/reg')">去注册</span></p>

    </a-form-item>
  </a-form>
  </div>
  </div>
</div>

</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import {useRouter} from 'vue-router'
import axios from 'axios'
interface FormState {
  user: string;
  pwd: string;

}
export default defineComponent({
  setup() {

      const router=useRouter()
    const formState = reactive<FormState>({
      user: '',
      pwd: ''
      
    });
    const onFinish = async(values: any) => {
      console.log('Success:', values);
       let res=await axios.post("/api/login",({...formState}))
       let {token,code,msg}=res.data
       if(code===200){
        localStorage.setItem('token',token)
         router.push('/layout')
       }else{
           alert(msg)
       }
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };
    return {
      formState,
      router,
      onFinish,
      onFinishFailed,
    };
  },
});
</script>

<style lang='scss' scoped>
  .box{
      width: 100vw;
      height: 100vh;
      background: #ccc;
      padding: 50px 0;

  }
  .box1{
      width: 1000px;
      height: 600px;
      background: #fff;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
  }
  .left{
      width: 500px;
      margin-top: 100px;
      margin-left: 20px;
      img{
          width: 100%;
          height: 350px;
      }
  }
  .right{
      width: 500px;
      margin-top: 180px;
      margin-right: 40px;
  }
</style>